<template>
  <el-dialog :title="title" center :visible.sync="openState" :close-on-click-modal="false" width="1024px" append-to-body
             v-if="openState">
    <el-form ref="detailForm" :model="detailForm" :rules="rules" label-width="150px">
      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="征收机关大类代码" prop="deptCode">
            <el-select style="width: 100%;" v-model="detailForm.deptCode" placeholder="征收机关大类代码">
              <el-option
                v-for="dict in dictMap.DEPT_CODE"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="预算科目代码" prop="subjectCode">
            <acct-no-input v-model="detailForm.subjectCode" placeholder="预算科目代码"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="12">
          <el-form-item label="发生额币种" prop="curcd">
            <el-input v-model="detailForm.curcd" :disabled="true"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="发生额" prop="amount">
            <ht-amount-input
              v-model="detailForm.amount"
              placeholder="发生额"
            ></ht-amount-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div slot="footer" align="center" class="dialog-footer">
      <el-button type="primary" @click="confirm">提 交</el-button>
      <el-button type="primary" @click="close">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>

import HtAmountInput from "@/views/components/HtAmountInput";
import AcctNoInput from "@/views/components/AcctNoInput/index.vue";

export default {
  name: "listB104",
  components: {AcctNoInput, HtAmountInput},
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      title: "",
      openState: false,
      defaultSearchKey: "cnapsBankSearch-dialog",
      // 来源标识 为了服用区分是哪个选项触发的
      fromFlag: "",
      dictMapAsync: this.dictMap,
      tableLoadingState: false,
      formOptions: [],
      detailForm: {
        deptCode: '',
        subjectCode: '',
        curcd: 'CNY',
        amount: 0,
      },
      index: '',
      rules: {
        deptCode: [{required: true, message: "请输入征收机关大类代码", trigger: "blur"}],
        subjectCode: [{required: true, message: "请输入预算科目代码", trigger: "blur"},
          {max: 20, message: "预算科目代码最长为20位", trigger: "blur"}],
        amount: [{required: true, message: "请输入账单金额", trigger: "blur"}],

      }
    }
  },
  mounted() {

  },
  methods: {
    show(row, index) {
      this.openState = true;
      console.log(index)
      if (row) {
        this.$set(this.detailForm, "deptCode", row.deptCode)
        this.$set(this.detailForm, "subjectCode", row.subjectCode)
        this.$set(this.detailForm, "curcd", row.curcd)
        this.$set(this.detailForm, "amount", row.amount)
      } else {
        this.$set(this.detailForm, "deptCode", '')
        this.$set(this.detailForm, "subjectCode", '')
        this.$set(this.detailForm, "curcd", 'CNY')
        this.$set(this.detailForm, "amount", 0)
      }
      if (index !== undefined) {
        this.index = index;
      } else {
        this.index = undefined;
      }
    },
    close() {
      this.openState = false;
      this.resetForm("detailForm")
    },
    // 点击确认数据
    confirm() {
      this.$refs["detailForm"].validate((valid) => {
        console.log(this.index);
        if (valid) {
          const list = {
            deptCode: this.detailForm.deptCode,
            subjectCode: this.detailForm.subjectCode,
            curcd: this.detailForm.curcd,
            amount: this.detailForm.amount,
          }
          this.$emit("confirm", list, this.index);
          this.openState = false;
          this.resetForm("detailForm");
        }
      })
    },
  },
};
</script>
<style scoped></style>
